<template>
  <div class="gameLobby">
    <div class="gameLobby-left nui-scroll">
      <div class="money">
        <span>资产</span>
        <span>0.00 USDT</span>
        <img src="../../assets/img/zichan.png" alt="">
      </div>
      <div v-for="v in 4" :key="v" class="game-list">
        <div class="game-list-title">
          <p class="num">156/156</p>
          <div class="center">
            <img src="../../assets/img/lol.png" alt />
            <span>英雄联盟</span>
          </div>
          <img @click="show($event)" class="down" src="../../assets/img/xiangxia.png" alt />
        </div>
        <div class="game-list-cancle">
          <span>全选</span>
          <span>取消</span>
          <ul class="game-list-cancle-match">
            <li>
              <div>
                <img style="width:12px" src="../../assets/img/xuanzhong.png" alt />
                <span>2020 LCK 夏季联赛</span>
              </div>
              <span>20</span>
            </li>
            <li>
              <div>
                <span></span>
                <span>2020 LCK 夏季联赛</span>
              </div>
              <span>20</span>
            </li>
            <li>
              <div>
                <span></span>
                <span>2020 LCK 夏季联赛</span>
              </div>
              <span>20</span>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="gameLobby-right nui-scroll">
      <ul class="match-list">
        <li @click="$router.push({path:'/order'})" v-for="v in 10" :key="v" class="match-list-content colorActive">
          <div class="line1">
            <img src="../../assets/img/lol.png" alt />
            <div>
              <p>06-10</p>
              <p>17:00</p>
            </div>
          </div>
          <div class="line2">
            <span style="color:#fff">FunPlus Phoenix</span>
            <div>
              <img src="../../assets/img/game1.png" alt />
              <span style="color:#CFA66E">12.425</span>
            </div>
            <div v-if="v%2==0" class="time1">
              <p>已开始</p>
            </div>
            <div v-else class="time2">
              <span>12:10:20</span>
            </div>
            <div>
              <span style="color:#CFA66E">12.425</span>
              <img src="../../assets/img/game2.png" alt />
            </div>
            <span style="color:#fff">FunPlus Phoenix</span>
          </div>
          <div class="line3">
            <img src="../../assets/img/game3.png" alt />
            <div>
              <img style="width:65px;" src="../../assets/img/lolpankou.png" alt />
              <div>
                <p>+133</p>
                <p>盘口</p>
              </div>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import $ from "jquery";
export default {
  name: "gameLobby",
  data() {
    return {
      listShow: false
    };
  },
  methods:{
    show(el) {
      var num = 1;
      $(el.target)
      .parents(".game-list-title")
      .siblings(".game-list-cancle")
        .slideToggle(500);
    },
  }
};
</script>

<style lang='less' scope>
@import url("../../assets/css/comm.css");
.gameLobby {
  position: relative;
  .gameLobby-left {
    position: absolute;
    left: 0;
    top: 0;
    width: 280px;
    height: 80vh;
    overflow-y: scroll;
    .money{
      margin-top: 10px;
      padding: 15px;
      background-image: linear-gradient(#252A48,#30365A);
      font-size: 12px;
      color: #fff;
      border-radius: 4px;
      position: relative;
      span:first-child{
        color: #EBD2AB;
        margin-right: 15px;
      }
      >img{
        position: absolute;
        bottom: 0;
        right: 10px;
        width: 10%;
      }
    }
    .game-list:nth-child(1) {
      margin-top: 10px;
    }
    .game-list {
      margin-top: 20px;
      background-color: #242948;
      .game-list-title {
        background: url("../../assets/img/csgo.png") no-repeat;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px 15px;
        border-radius: 5px;
        overflow: hidden;
        .num {
          font-size: 14px;
          color: #ebd2ab;
        }
        .center {
          display: flex;
          justify-content: center;
          align-items: center;
          > img {
            width: 20px;
            margin-right: 10px;
          }
          > span {
            font-size: 14px;
            color: #fff;
          }
        }
        .down {
          width: 16px;
        }
      }
      .game-list-cancle {
        display: none;
        padding: 10px 0 0;
        > span {
          display: inline-block;
          width: 49%;
          text-align: center;
          font-size: 14px;
          color: #ebd2ab;
        }
        > span:nth-child(1) {
          border-right: 1px solid #b5b5b5;
        }
        > .game-list-cancle-match {
          padding: 10px;
          > li {
            display: flex;
            justify-content: space-between;
            align-content: center;
            font-size: 12px;
            color: #8990c5;
            border-bottom: 1px solid #1e223d;
            padding: 10px 0;
            cursor: pointer;
            > div {
              > span:nth-child(1) {
                display: inline-block;
                border: 1px solid #187e78;
                width: 10px;
                height: 10px;
                border-radius: 50%;
                margin-right: 5px;
              }
              > img:nth-child(1) {
                width: 10px;
                margin-right: 5px;
              }
            }
          }
        }
      }
    }
  }
  .gameLobby-right {
    margin-left: 300px;
    height: 80vh;
    overflow-y: scroll;
    padding-right: 100px;
    .match-list {
      margin-top: 10px;
      .match-list-content {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px 40px;
        border-radius: 5px;
        margin-bottom: 15px;
        > .line1 {
          display: flex;
          justify-content: flex-start;
          align-items: center;
          > div {
            margin-left: 20px;
            p {
              font-size: 14px;
              color: #fff;
              font-weight: bold;
            }
          }
        }
        > .line2 {
          width: 70%;
          display: flex;
          justify-content: space-around;
          align-items: center;
          font-size: 14px;
          font-weight: bold;
          > div:nth-child(2),
          div:nth-child(4) {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            span {
              margin: 0 10px;
            }
          }
        }
        > .line3 {
          display: flex;
          justify-content: flex-start;
          align-items: center;
          > div {
            width: 60px;
            height: 60px;
            text-align: center;
            position: relative;
            margin-left: 15px;
            > img {
              position: absolute;
              left: 0;
              top: 0;
            }
            display: flex;
            justify-content: center;
            align-items: center;
            > div {
              font-size: 12px;
              text-align: center;
              color: #cfa66e;
              p:nth-child(2) {
                color: #fff;
              }
            }
          }
        }
      }
      .match-list-content:hover {
        border: 1px solid #000;
      }
    }
  }
}

.colorActive {
  border: 1px solid #4e8994;
  background: #1d3c4e;
}
.time1 {
  color: #8990c5;
  text-align: center;
}
.time2 {
  > span {
    border: 1px solid #d0fff8;
    padding: 5px 10px;
    border-radius: 15px;
    color: #fff;
    font-family: "digital.ttf";
    font-weight: normal;
  }
}
</style>
